vuex持久化，存储的数据刷新页面后导致数据丢失？ |
您所在的位置：网站首页 › vue store storage › vuex持久化，存储的数据刷新页面后导致数据丢失？ |
|
vuex中存储的数据，刷新页面后导致数据丢失
一、问题
使用vuex存储全局数据后，刷新浏览器页面导致数据丢失 二、原因刷新页面时，vue实例重新加载，因此导致store也随之被重置 store是用来存储组件状态的，而不是用来做本地数据存储的 对于不希望页面刷新之后被重置的数据，推荐使用本地存储来进行存储 vuex的状态储存是响应式的，当我们使用vuex进行全局状态管理时，vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会得到高效刷新，vuex存储的数据只是在页面中，相当于我们定义的全局变量，刷新之后，会发现之前获取的vuex状态的数据消失了，里面的数据就会恢复到初始化的状态。因为，刷新页面后，vuex会重新更新state 三、解决 方法一：监听页面是否刷新，如果页面刷新了，将state对象存入到sessionStorage/localStorage中。 页面打开之后，判断sessionStorage/localStorage中是否存在state对象，如果存在，则说明页面是被刷新过的，将sessionStorage/localStorage中存的数据取出来给vuex中的state赋值。如果不存在，说明是第一次打开，则取vuex中定义的state初始值。 示例代码请在 App.vue 中 export default { name: 'App', created() { // 在页面加载时读取sessionStorage里的状态信息 if (sessionStorage.getItem('store')) { this.$store.replaceState( Object.assign( {}, this.$store.state, JSON.parse(sessionStorage.getItem('store')) ) ) } // 页面刷新时，将vuex里的信息保存到sessionStorage // 在页面刷新时先触发beforeunload事件 window.addEventListener('beforeunload', () => { sessionStorage.setItem('store', JSON.stringify(this.$store.state)) }) }, } 复制代码 方法二： 安装插件vuex-persistedstate实现数据持久化，来解决使用vuex存储状态时页面刷新后数据消失的问题 vuex-persistedstate：在页面重新加载之间保持并重新补充Vuex状态 npm install --save vuex-persistedstate 复制代码 import Vue from 'vue' import Vuex from 'vuex' import createPersistedState from 'vuex-persistedstate' Vue.use(Vuex) const store = new Vuex.Store({ // 定义状态 state: { isopen:'', isThirdAuthDev:false, isDataSourceDev:false, isDDioDev:false, ismappingBindDev1:false, ismappingBindDev2:false, id: '', nickname: '', username: '', password: '', remember: '', fieldsbind:[], bindList:{} }, mutations: { // 相当于编写set方法 setUser (state, data) { state.nickname = data }, setUserId (state, data) { state.id = data }, setUsername (state, data) { state.username = data }, setPassword (state, data) { state.password = data }, setRemember (state, data) { state.remember = data }, clear (state) { for (const i in state) { delete state[i] } }, setTest(state,data){ if(data.isopen){ state.isopen=data.isopen; }else if(data.isThirdAuthDev){ state.isThirdAuthDev=data.isThirdAuthDev }else if(data.isDataSourceDev){ state.isDataSourceDev=data.isDataSourceDev }else if(data.isDDioTestDev){ state.isDDioDev=data.isDDioDev }else if(data.ismappingBindDev1){ state.ismappingBindDev1=data.ismappingBindDev1 }else if(data.ismappingBindDev2){ state.ismappingBindDev2=data.ismappingBindDev2 } console.log(state) }, }, actions: { // 写一些异步的操作 // setUserAysnc (context, LoginUser) { // context.commit('setUser', LoginUser) // } }, modules: {}, plugins: [ createPersistedState({ storage: window.localStorage, reducer (state) { return { id: state.id, // 持久化 nickname: state.nickname, username: state.username, password: state.password, remember: state.remember, isopen:state.isopen, isThirdAuthDev:state.isThirdAuthDev, isDataSourceDev:state.isDataSourceDev, isDDioDev:state.isDDioDev, ismappingBindDev1:state.ismappingBindDev1, ismappingBindDev2:state.ismappingBindDev2, } } }) ] }) export default store 复制代码 四、补充cookie： 不适合存储较大的数据 （一段不超过4KB的小型文本数据） localStorage： 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除（永久存储） sessionStorage： 临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据（推荐） |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |